@mixin f-redefineResizable() {

    &.ng-resizable {
  
        .ng-resizable-s,
        .ng-resizable-e,
        .ng-resizable-n,
        .ng-resizable-w {
          &::before {
            content: '';
            position: absolute;
            background:  $f-neutral-07;
          }
  
          &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 6px;
            height: 60px;
            margin: -30px 0 0 -3px;
            background-image: url('./imgs/f-drag-icon-default.svg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
          }
  
          &:hover {
            background: none;
  
            &::before {
              background-image: $f-theme-07;
              box-shadow: 0 2px 5px 0 rgba($f-theme-03, 0.20);
            }
  
            &::after {
              background-image: url('./imgs/f-drag-icon-hover.svg');
              box-shadow: 0 2px 5px 0 rgba($f-theme-03, 0.20);
            }
          }
        }
  
        .ng-resizable-s,
        .ng-resizable-n {
          &::before {
            height: 1px;
            top: 50%;
            left: 0;
            right: 0;
          }
  
          &::after {
            transform: rotate(90deg);
          }
        }
  
        .ng-resizable-e,
        .ng-resizable-w {
          &::before {
            width: 1px;
            top: 0;
            left: 50%;
            bottom: 0;
          }
        }
      }
}

/*******************************
    左右结构中，拖拽集成収折功能
*******************************/
$f-pane-sidebar-border-radius:12px;
$f-pane-sidebar-fixed-position:14px;

@mixin f-listNavSidebarIcon {

  .f-list-nav-toggle-sidebar {
    width: 22px;
    height: 22px;
    background: #FFFFFF;
    border: 1px solid $f-neutral-07;
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 99;
    margin: 0;
    cursor: pointer;

    // 图标
    .triangle {
      border: none;
      font-family: FarrisIcons;
      width: 14px;
      height: 14px;
      -webkit-font-smoothing: antialiased;
      font-size: 14px;
      font-weight: 400;
      text-transform: none;
      display: block;
      line-height: 14px;
      margin: 0 auto;

      &::before {
        line-height: 1;
      }
    }

    &:hover {
      background-image: $f-theme-07;
      color: #fff;
      box-shadow: 0px 3px 8px 0px rgba($f-semantic-info-01, 0.4);
    }

    &.active {
      color: #fff;
      background-image: $f-theme-07;
    }
  }
}

// 在左侧
@mixin f-listNavSidebarIcon-on-left {
  .f-list-nav-toggle-sidebar {
    border-radius: $f-pane-sidebar-border-radius;
    top: $f-pane-sidebar-fixed-position;
    left: -$f-pane-sidebar-border-radius;
    right: auto;

    .triangle {
      border: none;

      &::before {
        content: '\e00d';
      }
    }


    &.active {
      left: -$f-pane-sidebar-border-radius;
      transform: rotateY(180deg);
    }
  }
}

// 在右侧
@mixin f-listNavSidebarIcon-on-right {
  .f-list-nav-toggle-sidebar {
    border-radius: $f-pane-sidebar-border-radius;
    top: $f-pane-sidebar-fixed-position;
    right: -$f-pane-sidebar-border-radius;
    left: auto;

    .triangle {
      border: none;

      &::before {
        content: '\e00f';
      }
    }

    &.active {
      right: -$f-pane-sidebar-border-radius;
      transform: rotateY(180deg);
    }
  }
}

// 在顶部
@mixin f-listNavSidebarIcon-on-top {
  .f-list-nav-toggle-sidebar {
    border-radius: $f-pane-sidebar-border-radius;
    top: -$f-pane-sidebar-border-radius;
    bottom: auto;
    right: $f-pane-sidebar-fixed-position;
    width: 22px;
    height: 22px;
    left: auto;

    .triangle {
      border: none;

      &::before {
        content: '\e00e';
      }
    }

    &.active {
      right: $f-pane-sidebar-fixed-position;
      left: auto;
      top: -$f-pane-sidebar-border-radius;
      bottom: auto;
      transform: rotateX(180deg);
    }
  }
}

// 在底部

@mixin f-listNavSidebarIcon-on-bottom {

  .f-list-nav-toggle-sidebar {
    border-radius: $f-pane-sidebar-border-radius;
    top: auto;
    bottom: -$f-pane-sidebar-border-radius;
    right: $f-pane-sidebar-fixed-position;
    width: 22px;
    height: 22px;
    left: auto;

    .triangle {
      border: none;

      &::before {
        content: '\e00c';
      }
    }

    &.active {
      top: auto;        
      left: auto;
      right: $f-pane-sidebar-fixed-position;
      bottom: -$f-pane-sidebar-border-radius;
      transform: rotateX(180deg);
    }
  }
}
